<template>
    <div class="lunarFullCalendar">
    <div class="calendar-box-top">
      <div class="calendar-box-top-left">
        <p>{{pageData.calendarConfig.title}}<span></span>{{pageData.calendarConfig.subtitle}}</p>
      </div>
      <div class="calendar-box-top-right">
        <div class="calendar-box-top-right-cont" v-for='item in pageData.topList'>
          <p class="title">{{item.title}}</p>
          <p class="content" v-for='(cont,index) in item.contList' v-if="index<=1">{{cont}}</p>
        </div>
      </div>
    </div>
    <div class="lunarFullCalendar lunarFullCalendars">
      <div class="full-calendar-l fl">
        <div class="title" style="padding-top:15px;height:35px;">本周工作提醒</div>
        <div class="full-calendar-list">
          <ul>
            <li v-for='item in pageData.leftList'>
              <div v-if="item.content!=null" class="full-calendar-l-title"></div>
              <div v-if="item.content!=null" class="full-calendar-l-cont">
                <p v-for='(cont,index) in item.contList' v-if="index<=2"><b></b><span>{{cont}}</span></p>
              </div>
            </li>
          
          </ul>
        </div>
      </div>
      <div class="full-calendar fl">
      <full-calendar :events="events" @dayClick="dayClick"  @eventClick="fetchEvent" @eventhover='fetchEvent1' @eventout='fetchEvent2'
        @dayhover='dayhover' @dayout='dayout'
        lang="zh" @change="changeDateRange">
          <template slot="fc-body-card2"  >
            <div class="tips-box">
              <div class="title">{{tips.title}}</div>
              <div class="tips-box-content" v-html='tips.content'></div>
            </div>
          </template>
      <!-- <template slot="fc-body-card">
          <div class="card-content"  v-if="interviewEvent"> -->
              <!-- <p class="card-info">{{interviewEvent.weekDay}}{{interviewEvent.title}}</p>
              <p class="card-name">{{interviewEvent.name}}</p>
              <p class="card-content">{{interviewEvent.content}}</p> -->
              <!-- <p class="card-info">手机：{{interviewEvent.data.cv.contact.mobile}}</p> -->
              <!-- <p class="card-info">id:{{interviewEvent.id}}</p> -->
              <!-- <div class="card-handle">
                  <div class="card-left">
                      请假1天
                  </div>
                  <span class="card-right link">查看详情</span>
              </div>
              <div class="card-handle">
                  <span class="card-left">审核人：{{'某某'||interviewEvent}}</span>
                  <span class="card-right status status1">已通过</span>
              </div> -->
          <!-- </div>
      </template> -->
    </full-calendar>
      </div>
      <div class="full-calendar-l fl">
        <div class="title">本周中小学校历<br /><span>（时间各地不一，仅供参考）</span></div>
        <div class=" full-calendar-list-r">
          <ul>
            <li v-for='item in pageData.rightList'>
              <div v-if="item.content!=null" class="full-calendar-l-title"></div>
              <div v-if="item.content!=null" class="full-calendar-l-cont">
                <p v-for='(cont,index) in item.contList' v-if="index<=2"><b></b><span>{{cont}}</span></p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="calendar-box-bottom">
      <p><span></span>节日/节气</p>
      <p><span></span>素质教育纪念日</p>
      <p><span></span>品牌传播活动</p>
      <p><span></span>品牌营销活动</p>
      <p><span></span>行业活动/盛会</p>
    </div>
    <div class="next-month-box">
      <div class="next-month-box-left fl">
        <p>{{nextMonthData.title}}<span></span>{{nextMonthData.subtitle}}</p>
      </div>
      <div class="next-month-box-right fl">
        <p v-for='item in nextMonthData.contentList'><span></span>{{item}}</p>
      </div>
    </div>
  </div>
</template>
<script>
// import FullCalendar from './vue-fullcalendar/fullCalendar.vue'
import FullCalendar from '../../components/vue-fullcalendar/fullCalendar.vue'
// import mock from '../../components/vue-fullcalendar/mock.json'
export default {
  name:'MarketingCalendar',
  components:{
    "full-calendar": FullCalendar
  },
  data(){
    return{
      events: [
        // {
        //   id: 1,
        //   title: '数据1',
        //   allDay: true,
        //   start: new Date().getTime(),
        //   end: new Date().getTime() +3 * 24 * 60 * 60 * 1000
        // },
        // {
        //   id: 2,
        //   title: '数据2',
        //   start: new Date().getTime() + 24 * 60 * 60 * 1000,
        //   end: new Date().getTime() +3 * 24 * 60 * 60 * 1000
        // },
        // {
        //   id: 3,
        //   title: '数据3',
        //   start: new Date().getTime() +3 * 24 * 60 * 60 * 1000
        // },
      ],
      interviewEvent: {},
      pageData:{},
      tips:{},
      nextMonthData:{},
      monthYear:this.$route.query.monthYear
    }
  },
  created(){
    this.fetchEventsList();
  },
  methods:{
    getPageData(){
      this.$api.agent.querySideList({monthYear:this.monthYear}).then(res=>{
        if(res.result==1&&res.data){
          this.pageData=res.data
          this.pageData.leftList.forEach(item=>{
            if(item.content==null){
              item.contList=item.content
            }else {
              item.contList=item.content.split('\n')
            }
          })
          this.pageData.rightList.forEach(item=>{
             if(item.content==null){
              item.contList=item.content
            }else {
              item.contList=item.content.split('\n')
            }
          })
          this.pageData.topList.forEach(item=>{
             if(item.content==null){
              item.contList=item.content
            }else {
              item.contList=item.content.split('\n')
            }
          })
        }        
      })
      this.$api.agent.queryContentList({monthYear:this.monthYear}).then(res=>{
        if(res.result==1&&res.data){
          res.data.forEach((item,index)=>{
            const date=item.marketingDate.replace(/-/g,'/')
            item.title=item.content
            item.start=Date.parse(date);
            if(item.marketingType==6){
              this.interviewEvent=item 
            }
          })
          this.events=res.data
        }
      })
      this.$api.agent.queryNextList({monthYear:this.monthYear}).then(res=>{
        if(res.result==1&&res.data){
          this.nextMonthData=res.data
        }
      })
    },
    fetchEvent(event, jsEvent){
      this.interviewEvent = event
      // console.log(event, jsEvent)
    },
    fetchEvent1(event, jsEvent){
      // console.log(event)
      this.interviewEvent2 =true
      // alert('滑过');
    },
    fetchEvent2(event, jsEvent){
      // console.log(event)
      this.interviewEvent2 =false
      // alert('滑出');
    },
    fetchEvent3(event, jsEvent){
      // console.log(event)
      this.interviewEvent ={}
      // alert('滑出');
    },
    dayClick(){
      // console.log('天');
    },
    dayhover(day, jsEvent){
      if(day.events.length!=0){
        day.events.forEach(item=>{
          if(item.marketingType==6){
              item.title='今日Tips：'
              this.tips=item
          }
          
        })
      }
      
    },
    dayout(day,jsEvent){
      this.tips=''
      this.interviewEvent ={}
    },
    changeDateRange(){
      console.log('改变了日期')
    },
    fetchEventsList(){
      // this.initEvents(mock)
    },
    initEvents(list){
      // this.fcEvents = mock
      
      console.log(this.fcEvents, 'fc')   
    }
  },
  mounted(){
    this.getPageData()
  }
}
</script>
<style scoped lang="scss">

  .card-content{
      box-sizing: border-box;
      width: 100%;
      height: auto;
      overflow: hidden;
      position: relative;
      padding: 5px 10px;
      text-align: left;
      .card-name{
          font-weight: bold;
          font-size: 14px;
          color: #3E444C;
      }
      .card-info{
          font-size: 13px;
          color: #3E444C;
          text-overflow: ellipsis;
          width: 100%;
          overflow: hidden;
          word-wrap: none;
      }
      .card-handle{
          font-size: 13px;
          color: #3E444C;
          display: flex;
          align-items: center;
          justify-content: space-between;
          &:last-child{
              border-top: 1px solid #ECECED;
              padding-top: 5px;
              margin-top: 5px;
          }
          .card-left{
              display: flex;
              align-items: center;
              .tag{
                  display: inline-block;
                  width: 50px;
                  height: 20px;
                  margin-left: 10px;
              }
          }
          .card-right{
              &.status{
                  border-radius: 15px;
                  border: 1px solid;
                  padding: 0px 5px;
                  font-size: 12px;
                  margin: 0 4px;
                  word-break: keep-all;
                  white-space: nowrap;
                  display: inline-block;
                  line-height: 1.5;
                  &.status0{
                      color: #8B8F94;
                  }
                  &.status1{
                      color: #27BA9C;
                  }
                  &.status5{
                      color: #FF7062;
                  }
              }
              &.link{
                  color: #5272FF;
                  font-size: 11px;
                  cursor: pointer;
                  &:hover{
                      color: #627FFF;
                  }
              }
          }
      }
  }
</style>
<style scoped lang="scss">
$color: #45b984;
.lunarFullCalendars{
  min-width:1132px;
  height: 542px !important;
  // overflow: hidden;
}
.fl{
  float: left;
}
.lunarFullCalendar {
  ul{
    padding: 0;
    margin: 0;
    li{
      list-style: none;
      
    }
  }
    // // min-width: 1132px;
    // min-width: 900px;
  height: 100%;
  margin: 0 30px;
  .calendar-box-top{
    background: #178FFF;
    min-width: 1132px;
    margin: 0 30px;
    height: 102px;
    color: #fff;
    .calendar-box-top-left{
      width: 23.5%;
      // min-width: 294px;
      border-right:1px solid rgba(255,255,255,0.17);
      float: left;
      height: 100%;
      p{
        font-size: 18px;
        line-height: 102px;
        margin: 0 !important;
        height: 100%;
        margin: 0 !important;
        span{
          display: inline-block;
          width:5px;
          height:5px;
          background:rgba(255,255,255,1);
          border-radius:50%;
          margin: 0 10px;
        }
      }
    }
    .calendar-box-top-right{
      min-width: 837px;
      float: left;
      height: 102px;
        margin: 0 auto;
        display: flex;
        align-items: center;
      .calendar-box-top-right-cont{
        float: left;
        max-width: 290px;
        margin: 0 auto;
        margin-left: 25px;
        text-align: left;
        // overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
        -webkit-line-clamp:2; //显示的行
        .title{
          margin-top: 5px;
          margin-bottom: 5px;
          font-size: 14px;
          font-weight: bold;
          height: 20px;
        }
        .content{
          font-size: 12px;
          line-height: 24px;
          margin: 0 ;
        }
        p{
          // height: 40px;
          overflow: hidden;
          // text-overflow: ellipsis;
          line-height: 24px;
        }
      }
    }
  }
  .calendar-box-bottom{
    min-width: 1132px;
    margin: 0 30px;
    height: 58px;
    color: #666666;
    background: #fff;
    font-size: 12px;
    line-height: 58px;
    border: 1px solid #eaeaea;
    p{
      float: left;
      margin: 0;
      span{
        width:6px;
        height:6px;
        border-radius:50%;
        display: inline-block;
        margin-right: 8px;
        margin-left: 40px;
      }
      &:nth-child(1){
        span{
          background:rgba(155,69,222,1);
          margin-left: 15px;
        }
      }
      &:nth-child(2){
        span{
          background:rgba(0,177,80,1);
        }
      }
      &:nth-child(3){
        span{
          background:rgba(241,33,38,1);
        }
      }
      &:nth-child(4){
        span{
          background:rgba(255,138,0,1);
        }
      }
      &:nth-child(5){
        span{
          background:rgba(23,143,255,1);
        }
      }
    }
  }
  .next-month-box{
    min-width: 1132px;
    margin: 0 30px;
    margin-top: 20px;
    padding: 20px 0;
    overflow: hidden;
    padding: 20px 0;
    overflow: hidden;
    color: #333333;
    background: #fff;
    font-size: 12px;
    border: 1px solid #eaeaea;
    .next-month-box-left{
      min-width: 294px;
      width: 26%;
      border-right:1px solid rgba(232,232,232,1);
      float: left;
      height: 100%;
      p{
        font-size: 18px;
        line-height: 102px;
        color: #178FFF;
        span{
          display: inline-block;
          width:5px;
          height:5px;
          background:#178FFF;
          border-radius:50%;
          margin: 0 10px;
        }
      }
    }
    .next-month-box-right{
      text-align: left;
      min-width: 836px;
      width: 73%;

      p{
        color: #333333;
        font-size: 12px;
        width: 200px;
        float: left;
        margin-left: 30px;
        margin-top: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        span{
          width:6px;
          height:6px;
          background:rgba(164,222,248,1);
          border-radius:50%;
          display: inline-block;
          margin-right: 3px;
        }
      }
    }
  }
  .full-calendar-l{
    // min-width:200px;
    width: 13%;
    float: left;
    .title{
      height: 43px;
      border: none;
      background: #34b6ef;
      font-size: 14px;
      font-weight: bold;
      color: #fff;
      padding-top:7px;
       span{
        font-size: 12px;
      }
      }
    .full-calendar-list{
      ul{
        li{
          height:81px;
          background:rgba(237,254,255,1);
          border-left:1px solid rgba(236, 236, 236, 1);
          border-bottom:1px solid rgba(236, 236, 236, 1);
          border-right:1px solid rgba(236, 236, 236, 1);
          
          &:last-child{
            border-bottom:1px solid transparent;
          }
          .full-calendar-l-cont{
            padding: 10px 0;
            p{
              margin: 0;
              text-align: left;
              padding-left: 10px;
              font-size:12px;
              font-family:Microsoft YaHei;
              font-weight:400;
              color:rgba(75,75,75,1);
              white-space: nowrap;
            display: flex;
              align-items:center;
              
              line-height: 20px;
             span{
                    width: 220px;
                    overflow: hidden;
                    text-overflow: ellipsis;

                }
              b{
                width:6px;
                height:6px;
                margin-right: 4px;
                background:#A4DEF8;
                border-radius:50%;
                display: inline-block;
                font-weight: normal;
                flex-shrink:0
              }
            }
          }
        }
      }
    }
    .full-calendar-list-r{
      ul{
        li{
          background:rgba(237,254,255,1);
          border-right:1px solid rgba(236, 236, 236, 1);
          border-bottom:1px solid rgba(236, 236, 236, 1);
          border-left:1px solid rgba(236, 236, 236, 1);
          height: 81px;
          .full-calendar-l-cont{
            padding: 10px 0;
          }
          p{
              margin: 0;
              text-align: left;
              padding-left: 10px;
              font-size:12px;
              font-family:Microsoft YaHei;
              font-weight:400;
              color:rgba(75,75,75,1);
              white-space: nowrap;
            display: flex;
              align-items:center;
              
              line-height: 20px;
             span{
                    width: 220px;
                    overflow: hidden;
                    text-overflow: ellipsis;

                }
              b{
                width:6px;
                height:6px;
                margin-right: 4px;
                background:#A4DEF8;
                border-radius:50%;
                display: inline-block;
                font-weight: normal;
                flex-shrink:0
              }
            }
        }
      }
    }
  }
  .full-calendar{
    .tips-box{
      white-space: pre-wrap;
      color: #fff;
      font-size: 18px;
      text-align: left;
      .tips-box-content{
        font-size: 14px;
        overflow: hidden;
        height: 150px;
        line-height: 30px;
      }
    }
  }
  background: #fff;
  //   .top {
  //     height: 100px;
  //     h2 {
  //       text-align: center;
  //       font-size: 15px;
  //     }
  //     div {
  //       font-size: 13px;
  //     }
  //   }
  .full-calendar {
    min-width: 820px;
    width: 74%;
    height: calc(100% - 30px);
    /deep/ {
      .fc-unthemed thead,
      .fc-unthemed .fc-content,
      .fc-unthemed th,
      .fc-unthemed td,
      .fc-unthemed tbody,
      .fc-unthemed .fc-row,
      .fc-unthemed .fc-list-view,
      .fc-unthemed .fc-popover,
      .fc-unthemed .fc-divider,
      .fc-unthemed .fc-list-heading td {
        border-color: #eaecf1;
      }
      .fc-header-toolbar {
        height: 30px;
        margin-bottom: 0;
        line-height: 30px;
        h2 {
          font-size: 24px;
          color: #000;
        }
      }
      .fc-button {
        height: 30px;
        background: #fff;
        border-color: #fff;
        box-shadow: none;
        padding: 0;
      }
      .fc-today-button {
        font-size: 15px;
        color: $color;
      }
      .fc-show-button,
      .fc-hide-button {
        position: relative;
        width: 80px;
        border: 1px solid #bbbfcd;
        border-radius: 20px;
        font-size: 15px;
        color: #000;
      }
      .fc-next-button,
      .fc-prev-button {
        color: #7d8292;
      }
      .fc-button-group {
        margin-left: 20px;
        font-size: 15px;
        button {
          width: 80px;
          color: #000;
          border: 1px solid #bbbfcd;
        }
        button:first-child {
          border-top-left-radius: 20px;
          border-bottom-left-radius: 20px;
        }
        button:last-child {
          border-top-right-radius: 20px;
          border-bottom-right-radius: 20px;
        }
        .fc-state-active {
          background: $color;
          color: #fff;
          text-shadow: none;
        }
      }
      .fc-agendaDay-view,
      .fc-month-view,
      .fc-agendaWeek-view {
        .fc-widget-content {
          .fc-sun,
          .fc-sat {
            background: rgba(245, 246, 248, 0.6);
          }
          .fc-day-grid-container{
            height: 480px !important;
          }
          .fc-scroller{
            .fc-row{
              height: 80px !important;
            }
          }
          .fc-day-number {
            font-size: 15px;
            letter-spacing: 0;
            line-height: 13px;
            float: right;
            
          }
          .fc-day-top {
            padding: 15px 12px 0 12px;
          }
          .fc-day-cnTerm,
          .fc-day-cnDate {
            font-size: 12px;
            color: #7d8292;
            float: right;
          }
          .fc-more {
            font-size: 12px;
            color: #7d8292;
          }
          .fc-event {
            cursor: pointer;
            font-size: 12px;
            color: #000;
            background-color: rgba($color: $color, $alpha: 0.15) !important;
            border: 1px solid rgba($color: $color, $alpha: 0.15) !important;
            border-left: 2px solid rgba($color: $color, $alpha: 0.15) !important;
            border-radius: 0;
          }
          .fc-day-grid-event {
            padding: 1px 0 1px 5px;
          }
        }
      }
      .fc-agendaWeek-view,
      .fc-agendaDay-view {
        .fc-axis {
          font-size: 15px;
        }
        .fc-title {
          font-size: 15px;
          color: $color;
        }
      }
      .fc-month-view {
        .fc-head{
          width:111px;
          height:50px;
          border: none;
          background:rgba(52,182,239,1);
          span{
            font-size:12px;
            font-family:Arial;
            font-weight:400;
            color:rgba(255,255,255,1);
            line-height:29px;
          }
        }
        .fc-event {
          &.fc-not-start {
            border-left: 1px solid rgba($color: $color, $alpha: 0.1) !important;
          }
        }
      }
      .fc-agendaDay-view {
        .fc-head {
          table {
            margin: 15px 0;
          }
          .fc-day-header {
            display: none;
          }
        }
      }
      .fc-head {
        .fc-day-header,
        .fc-widget-header,
        .fc-head-container {
          border:none;
          height: 50px;
          line-height: 50px;
        }
        table {
          // margin: 10px 0 15px 0;
          font-size: 15px;
          color: #000;
        }
      }
    }
  }
}

</style>